import { useStoreWorkbench } from '@/store/workbench';
import { Col, Form, Input, Modal, Row, Select } from 'antd';
import { useEffect, useState } from 'react';

interface Iprops {
  visibleModal: boolean;
  titleModal: string;
  onAddRequirement: (val: any) => void;
  onAddChat: (val: any) => void;
}

const CreateModal: React.FC<Iprops> = ({
  visibleModal,
  titleModal,
  onAddRequirement,
  onAddChat,
}) => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [confirmLoading] = useState(false);
  const [projectOptions, setProjectOptions] = useState<any[]>([]); // 项目
  const [requireOptions, setRequireOptions] = useState<any[]>([]);
  const { currentMenuItem } = useStoreWorkbench();

  useEffect(() => {
    if (visibleModal) {
      setVisible(true);
      if (currentMenuItem.hasOwnProperty('requirementList')) {
        // 项目
        form.setFieldsValue({
          projectId: currentMenuItem.id || null,
          requirementId: null,
        });
        setProjectOptions([
          {
            label: currentMenuItem.name,
            value: currentMenuItem.id || null,
          },
        ]);
        setRequireOptions(
          currentMenuItem?.requirementList?.map((item: any) => {
            return {
              label: item.title,
              value: item.id,
            };
          }),
        );
      }
    }
  }, [visibleModal]);

  const onClose = () => {
    setVisible(false);
    form.resetFields();
  };

  const handleOk = () => {
    form
      .validateFields()
      .then((values) => {
        if (titleModal === '新建对话') {
          onAddChat(values);
          onClose();
        }
        if (titleModal === '新建需求') {
          onAddRequirement(values);
          onClose();
        }
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });
  };

  return (
    <Modal
      title={titleModal}
      open={visible}
      onOk={handleOk}
      onCancel={onClose}
      confirmLoading={confirmLoading}
      okText="保存"
    >
      <Form
        style={{ marginTop: 40 }}
        form={form}
        labelCol={{
          span: 6,
        }}
      >
        {titleModal === '新建需求' && (
          <>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="需求名称"
                  name="title"
                  rules={[{ required: true, message: '不得为空' }]}
                >
                  <Input placeholder="请输入" />
                </Form.Item>
              </Col>
            </Row>
          </>
        )}

        {titleModal === '新建对话' && (
          <>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="所属项目"
                  name="projectId"
                  rules={[{ required: true, message: '不得为空' }]}
                >
                  <Select
                    disabled
                    placeholder="请选择"
                    options={projectOptions}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <Form.Item
                  label="所属需求"
                  name="requirementId"
                  rules={[{ required: true, message: '不得为空' }]}
                >
                  <Select placeholder="请选择" options={requireOptions} />
                </Form.Item>
              </Col>
            </Row>
          </>
        )}
      </Form>
    </Modal>
  );
};

export default CreateModal;
